<html>

<head>
    <meta charset="utf-8">
    <title>refs的使用！！</title>
</head>

<body>
<div id="app"></div>
<script src="react/react.js"></script>
<script src="react/JSXTransformer.js"></script>
<script type="text/jsx">
    var FormApp = React.createClass({
        getInitialState: function () {
            return {
                inputValue: 'input value',
                selectValue: 'A',
                radioValue: 'B',
                checkValues: [],
                textareaValue: 'some text here,,,,,'
            }
        },
        handleSubmit: function (e) {
            e.preventDefault();
            var formData = {
                input: this.refs.goodInput.getDOMNode().value,
                select: this.refs.goodSelect.getDOMNode().value,
                textarea: this.refs.goodTextarea.getDOMNode().value,
                radio: this.state.radioValue,
                check: this.state.checkValues,
            }

            console.log('the form result is:')
            console.log(formData);

            this.refs.goodRadio.saySomething();

        },
        handleRadio: function (e) {
            this.setState({
                radioValue: e.target.value,
            })
        },
        handleCheck: function (e) {
            var checkValues = this.state.checkValues.slice();
            var newVal = e.target.value;
            var index = checkValues.indexOf(newVal);
            if (index == -1) {
                checkValues.push(newVal)
            } else {
                checkValues.splice(index, 1);
            }

            this.setState({
                checkValues: checkValues,
            })
        },
        render: function () {
            return (
                    <form onSubmit={this.handleSubmit}>
                        <input ref="goodInput" type="text" defaultValue={this.state.inputValue}/>
                        <br/>
                        选项：
                        <select defaultValue={this.state.selectValue} ref="goodSelect">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                        </select>
                        <br/>
                        <p>radio button!</p>
                        <RadioButtons ref="goodRadio" handleRadio={this.handleRadio}/>
                        <br/>

                        <Checkboxes handleCheck={this.handleCheck}/>
                        <br/>
                        <textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea>
                        <button type="submit">提交</button>

                    </form>
            )
        }
    });

    var RadioButtons = React.createClass({
        saySomething: function () {
            alert("yo what's up man!");
        },
        render: function () {
            return (
                    <span>
						A
						<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/>
						B
						<input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked
                               value="B"/>
						C
						<input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/>
					</span>
            )
        }
    });

    var Checkboxes = React.createClass({
        render: function () {
            return (
                    <span>
						A
						<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="A"/>
						B
						<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B"/>
						C
						<input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C"/>
					</span>
            )
        }
    })


    var formApp = React.render(
            <FormApp/>,
        document.getElementById('app')
    )


</script>


</body>

</html>